<template>
	<!-- <menus style="width: 300px;" :data="data1" defaultActive="1" background-color="grey"></menus> -->
	<infiniteMenu style="width: 300px;" :data="data2" defaultActive="2" background-color="#fff"></infiniteMenu>
</template>

<script lang="ts" setup>
	let data1 = [{
		name: '导航1',
		index: '1',
		icon: 'Document'
	}, {
		name: '导航2',
		index: '2',
		icon: 'Document'
	}, {
		name: '导航3',
		index: '3',
		icon: 'Document',
		children: [{
			name: '导航3-1',
			index: '3-1',
			icon: 'Document',
		}]
	}]

	let data2 = [{
		name: '导航1',
		index: '1',
		icon: 'Document'
	}, {
		name: '导航2',
		index: '2',
		icon: 'Document'
	}, {
		name: '导航3',
		index: '3',
		icon: 'Document',
		children: [{
			name: '导航3-1',
			index: '3-1',
			icon: 'Document',
			children: [{
				name: '导航3-1-1',
				index: '3-1-1',
				icon: 'Document',
			}]
		}]
	}]
</script>

<style scoped>

</style>
